<template>
  <div class="page-container">

    <el-card :body-style="cardStyles" style="width: 25%;height: auto">
      <el-divider content-position="left">菜单列表</el-divider>
      <el-table
        size="small"
        :data="tableData"
        style="width: 100%;"
        height="calc(100% - 25px)"
        row-key="id"
        highlight-current-row
        default-expand-all
        stripe
        @current-change="handleCurrentChange">
        <template slot="empty">
          <empty-tip></empty-tip>
        </template>
        <el-table-column
          prop="text"
          label="菜单"
          min-width="180">
        </el-table-column>

        <el-table-column
          prop="btns"
          label="状态"
          min-width="60">
          <template slot-scope="scope">
            <el-badge is-dot class="state-dot"
                      :type="scope.row.available && scope.row.available===1?'success':'danger'"/>
            <i :class="scope.row.attributes.btnClass"></i>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          min-width="120">
          <template slot-scope="scope">
            <el-link v-if="hasPerm('resources-enable') && scope.row.available===1"
                     @click="enablePerms(scope.row.id, false)"
                     icon="el-icon-remove" type="warning"> 禁用
            </el-link>

            <el-link v-if="hasPerm('resources-enable') && scope.row.available===0"
                     @click="enablePerms(scope.row.id, true)"
                     icon="el-icon-success" type="success"> 启用
            </el-link>

            <el-link v-if="hasPerm('resources-del')"
                     @click="deletePerms(scope.row.id)"
                     icon="el-icon-delete-solid" type="danger"> 删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>


    <el-card :body-style="cardStyles" style="flex-grow: 1;">
      <el-divider content-position="left">{{editData?('修改菜单 - '+editData.text):'添加菜单'}}</el-divider>

      <el-button @click="beginAddMenu" size="small" style="margin-bottom: 10px;"><i class="el-icon-plus"></i>&nbsp;添加菜单
      </el-button>
      <add-edit-perm :data="editData" @complete="query()"></add-edit-perm>
    </el-card>

    <el-card :body-style="cardStyles" style="width: 30%;">
      <el-divider content-position="left">按钮列表</el-divider>

      <btn-page :edit-menu="editData"></btn-page>
    </el-card>
  </div>
</template>

<script>
  import AddEditPerm from './AddEditPermPage'
  import BtnPage from './ResBtnManagePage'

  export default {
    name: "index",
    components: {
      AddEditPerm, BtnPage
    },
    data() {
      return {
        loading: false,
        showPermForm: false,
        cardStyles: {height: '100%', padding: '20px'},
        editData: null,
        pmQueryParams: {
          name: '',
          type: '',
          code: '',
          pid: '',
          state: '',
          pageNumber: 1,
          pageSize: 10
        },
        tableData: [],
      }
    },
    mounted: function () {
      this.query();
    },
    methods: {
      query: function () {
        this.loading = true;
        this.api.post('/bucket-system/system/resources/all', {})
          .then((data) => {
            this.parseDatas(data.data);
            this.tableData = data.data;

            this.editData = null;
            this.loading = false;
          });
      },
      parseDatas(list) {
        let btns = [];
        let menus = [];
        list.forEach((d) => {
          if (d.attributes.type === "button") {
            btns.push(d);
          } else {
            menus.push(d);
          }

          let child = this.parseDatas(d.children);
          d.btnChildren = child.btns;
          d.children = child.menus;
        });
        return {btns: btns, menus: menus};
      },
      handleCurrentChange(val) {
        this.editData = val;
      },
      beginAddMenu() {
        this.editData = null;
      },

      deletePerms: function (id) {
        this.$confirm('该操作是物理删除，不可复原，是否确认删除？')
          .then(() => {
            let _ids = [];
            // if(!id && this.selectedRows.length>0){
            //   this.selectedRows.forEach(function(_s, index, arr){
            //     _ids.push(_s.id);
            //   });
            // }else
            _ids.push(id);
            this.api.post('/bucket-system/system/resources/delete', {id: _ids.join(',')})
              .then((data) => {
                if (data.code === 200) {
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                  this.query();
                } else {
                  this.$message.error(data.data);
                }
              });
            done();
          });
      },
      enablePerms: function (id, enable) {
        let _ids = [];
        let _url = '/bucket-system/system/resources/disable';
        // if(!id && this.selectedRows.length>0){
        //   this.selectedRows.forEach(function(_s, index, arr){
        //     _ids.push(_s.id);
        //   });
        // }else
        _ids.push(id);
        if (enable)
          _url = '/bucket-system/system/resources/enable';
        this.api.post(_url, {id: _ids.join(',')})
          .then((data) => {
            if (data.code === 200) {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.query();
            } else {
              this.$message.error(data.data);
            }
          });
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .page-container {
    display: flex;
    flex-grow: 1;

  .el-card:not(:last-child) {
    margin-right: 20px;
  }

  .el-card {

  .el-divider--horizontal {
    margin: 12px 0;
  }

  }
  }
  .state-dot {
    position: relative;
    top: 6px;
    margin-right: 10px;
  }
</style>
